<template>
	<view class="e-calendar-header e-border-bottom">
		<!-- <text class="e-calendar-header__title">{{ title }}</text> -->
		<div class="e-calendar-header__title">
			<image class="e-calendar-header__title__icon" src="./arrow_l.png" @tap="$emit('monthChange','pre')"></image>
			<picker mode="date" fields="month" :value="date" :start="startDate" :end="endDate" @change="dateChange">
			<view class="e-calendar-header__title__text" >{{ timeFormat(date,format) }}</view>
			</picker>
			<image class="e-calendar-header__title__icon" src="./arrow_r.png" @tap="$emit('monthChange','next')">
			</image>
		</div>
		<view class="e-calendar-header__weekdays">
			<text class="e-calendar-header__weekdays__weekday" v-if="sundayStart">{{$_e_t('sun')}}</text>
			<text class="e-calendar-header__weekdays__weekday">{{$_e_t('tue')}}</text>
			<text class="e-calendar-header__weekdays__weekday">{{$_e_t('wed')}}</text>
			<text class="e-calendar-header__weekdays__weekday">{{$_e_t('thu')}}</text>
			<text class="e-calendar-header__weekdays__weekday">{{$_e_t('fri')}}</text>
			<text class="e-calendar-header__weekdays__weekday">{{$_e_t('sat')}}</text>
			<text class="e-calendar-header__weekdays__weekday" v-if="!sundayStart">{{$_e_t('sun')}}</text>
		</view>
	</view>
	
</template>

<script setup lang="ts">
	import { timeFormat, padZero } from "../../libs/utils";

	const props = defineProps({
		date: {
			type: Date,
		},
		sundayStart: {
			type: Boolean,
			default: false
		},
		format: {
			type: String,
			default: 'yyyy/mm'
		},
	})
	
	const emit = defineEmits(['monthChange'])

	const getDate = (type : 'start' | 'end') => {
		const date = new Date();
		let year = date.getFullYear();
		let month = padZero(date.getMonth() + 1);
		let day = padZero(date.getDate());

		if (type === 'start') {
			year = year - 60;
		} else if (type === 'end') {
			year = year + 2;
		}
		return `${year}-${month}-${day}`;
	}

	const startDate = getDate('start')
	const endDate = getDate('end')
	
	const dateChange = (e:{detail:{value:string}}) =>{
		emit('monthChange',e.detail.value)
	}
</script>

<style lang="scss" scoped>
	@import "../../libs/theme/calendar-header.scss";
</style>